<script setup lang="ts">
import { useCalculateTextColor } from '@/utils/contrastColor'
// import { ref } from 'vue'
// const colorList = ref(['back', 'white', '#333', '#666', '#999', '#ccc', '#eee', '#f3f3f3', '#ffffff', 'rgb(255, 0, 0)', 'rgb(0, 255, 0)', 'rgb(0, 0, 255)', 'rgb(44,55,66)', 'rgba(255,255,255,0.1)'])
const testCases = [
  { backgroundColor: '#FFFFFF', containerColor: '#000000' },
  { backgroundColor: '#000000', containerColor: '#FFFFFF' },
  { backgroundColor: '#FF0000', containerColor: '#00FF00' },
  { backgroundColor: '#00FF00', containerColor: '#FF0000' },
  { backgroundColor: 'rgba(255, 0, 0, 0.5)', containerColor: '#00FF00' },
  { backgroundColor: 'rgba(0, 255, 0, 0.5)', containerColor: '#FF0000' },
  { backgroundColor: 'rgba(0, 0, 255, 0.5)', containerColor: 'rgba(255, 255, 0, 0.5)' },
  { backgroundColor: 'hsl(0, 100%, 50%)', containerColor: 'hsla(120, 100%, 50%, 0.3)' },
  { backgroundColor: 'transparent', containerColor: '#00FF00' },
  { backgroundColor: 'rgba(255, 255, 255, 0)', containerColor: 'rgba(0, 0, 0, 0)' }
];
</script>

<template>
  <main>
    <div class="bg" v-for="(item, index) in testCases" :style="{backgroundColor: item.containerColor}" :key="index">
      <div class="item" :style="{backgroundColor: item.backgroundColor}">
        <span :style="{color: useCalculateTextColor(item.backgroundColor, item.containerColor)}">test</span>
      </div>
    </div>
  </main>
</template>

<style scoped>
.item {
  width: 40px;
  height: 20px;
}
.bg {
  width: 200px;
  height: 200px;
}
</style>
